<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="功能简介" name="first">
      <div>
        <div class="content-section">
          <el-row>
            <el-col :span="24">
              <el-col :span="12">
                <div class="main-image" >
                  <img width="350" height="350" src="@/assets/simulation.gif" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
                </div>
              </el-col>
              <el-col :span="12" style="padding: 20px">
                <div class="content">
                  <h2>虚拟仿真</h2>
                  <p>Proteus VSM最令人兴奋和最重要的功能是它能够模拟微控制器上运行的软件与与其连接的任何模拟或数字电子设备之间的交互的能力。微控制器模型与产品设计的其他元素一起位于原理图上。就像真实的芯片一样，它模拟目标代码（机器代码）的执行。如果程序代码写入端口，则电路中的逻辑电平会相应更改，并且如果电路更改了处理器引脚的状态，则程序代码中会看到这一点，就像在现实生活中一样。<br>VSM CPU模型完全模拟每个支持的处理器上存在的I / O端口，中断，计时器，USART和所有其他外围设备。它不是一个简单的软件模拟器，因为所有这些外围设备与外部电路的交互都已完全建模到了波形级别，因此可以对整个系统进行仿真。<br>Proteus VSM拥有750多个受支持的微处理器变体，数千个嵌入式SPICE模型以及世界上最大的嵌入式仿真外围设备库，仍然是嵌入式仿真的首选。</p>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <div class="content-section even">
          <el-row>
            <el-col :span="24">
              <el-col :span="12" style="padding: 50px">
                <div class="content">
                  <h2>远程实验</h2>
                  <p>对于嵌入式工程师而言，Proteus VSM弥合了原理图捕获和PCB布局之间设计生命周期的空白。它使您可以将固件写入原理图上的固件并将其应用到原理图上受支持的微控制器，然后在混合模式SPICE电路仿真（包括MCU外设）中对程序进行协同仿真。<br> 您可以使用屏幕指示器（例如LED和LCD显示器）以及执行器（例如开关和按钮）与设计进行交互。Proteus VSM还为汇编代码和高级语言源提供了广泛的调试功能，包括断点，单步执行和变量显示。</p>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="main-image" >
                  <img width="350" height="350" src="@/assets/embedded_workflow.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="软件介绍" name="second">
      <div >
        <div class="content-section" >
          <el-row>
            <el-col :span="24">
              <el-col :span="12">
                <div class="main-image" >
                  <img width="350" height="350" src="@/assets/design.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
                </div>
              </el-col>
              <el-col :span="12" style="padding: 50px">
                <div class="content">
                  <h2>Proteus</h2>
                  <p>Proteus虚拟系统建模（VSM）将混合模式SPICE仿真与世界领先的快速微控制器仿真融合在一起。可以通过软件对硬件和固件设计进行快速原型制作！ <br> <br> 请在Proteus电子电路模拟器中设计，测试和调试嵌入式项目。嵌入式系统工作流程的敏捷开发。</p>
                  <el-button type="primary" >
                    <el-link :underline="false" href="https://www.labcenter.com/downloads/" target="_blank">点击下载</el-link>
                  </el-button>
                  <el-button type="success">本地打开</el-button>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <div class="content-section even">
          <el-row>
            <el-col :span="24">
              <el-col :span="12" style="padding: 50px">
                <div class="content">
                  <h2>Keil</h2>
                  <p>Keil C51是美国Keil Software公司出品的51系列兼容单片机C语言软件开发系统，与汇编相比，C语言在功能上、结构性、可读性、可维护性上有明显的优势，因而易学易用。Keil提供了包括C编译器、宏汇编、链接器、库管理和一个功能强大的仿真调试器等在内的完整开发方案，通过一个集成开发环境（μVision）将这些部分组合在一起。运行Keil软件需要WIN98、NT、WIN2000、WINXP等操作系统。</p>
                  <el-button type="primary" >
                    <el-link :underline="false" href="https://www.keil.com/download/" target="_blank">点击下载</el-link>
                  </el-button>
                  <el-button type="success">本地打开</el-button>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="main-image" >
                  <img width="350" height="350" src="@/assets/keil.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <div class="content-section" >
          <el-row>
            <el-col :span="24">
              <el-col :span="12">
                <div class="main-image" >
                  <img width="350" height="350" src="@/assets/quartusII.png" alt="Proteus VSM bridges the gap in the design life cycle between schematic capture and PCB layout. It enables you to write and apply your firmware to a microcontroller component on the schematic and then simulate the entire system in software.">
                </div>
              </el-col>
              <el-col :span="12" style="padding: 50px">
                <div class="content">
                  <h2>Quartus II</h2>
                  <p>Quartus II 是Altera公司的综合性CPLD/FPGA开发软件，原理图、VHDL、VerilogHDL以及AHDL（Altera Hardware 支持Description Language）等多种设计输入形式，内嵌自有的综合器以及仿真器，可以完成从设计输入到硬件配置的完整PLD设计流程。</p>
                  <el-button type="primary" >
                    <el-link :underline="false" href="https://www.intel.cn/content/www/cn/zh/software/programmable/quartus-prime/download.html" target="_blank">点击下载</el-link>
                  </el-button>
                  <el-button type="success">本地打开</el-button>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>
<style Lang="less" scoped>

.content-section {background: #022e5f;color: #ffffff;padding: 30px 0;}
.content-section h2 {font-size: 40px;line-height: 1.2;margin-top: 0;}
.content-section h2 {border-bottom: 2px solid #1c79b3;margin-bottom: 20px;padding-bottom: 20px;}
.content-section br {margin: 10px 0;display: block;content: "";}
.content-section p {line-height: 1.9;text-align: left}
.content-section.even {background: #09233c;}

/deep/.el-tabs__nav{
  background: #2a3746;
}

/deep/.el-tabs__item{
  color: #fff;
}

.el-row{
  margin-bottom: 0;
}

.el-link.el-link--default {
  color: #fff;
}

.el-upload__tip {
  font-size: 12px;
  color: #fff;
  margin-top: 7px;
}

/deep/.el-upload-list__item:hover {
  background-color: #409eff;
}

/deep/.el-upload-list__item-name{
  color: #fff;
}
/deep/.el-upload-list__item-name [class^=el-icon]{
  color: #fff;
}

/*how to overwrite the style of el-main?*/
/deep/.el-main{
  padding: 0 ;
}

.grid-content {
  min-height: 100px;
}

</style>
